<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>购物车总览</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .table td {
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<%@include file="../resources/nav.jsp" %>
<div class="container-fluid" style="margin-top: 100px;">
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light text-center">
                            电商平台销售趋势
                        </div>
                        <div class="card-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5><span style="font-size: 16px;"
                                              class="label label-success">电商平台销售趋势</span></h5>
                                </div>
                                <div class="ibox-content">
                                    <div id='lineChart' style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 按钮组 -->
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <%--<input type="submit" class="btn btn-sm btn-outline-danger" value="删除">
            <a href="Test.jsp" class="btn btn-outline-success btn-sm"><i class="fa fa-arrow-up"></i> 添加</a>--%>
            <%--<a href="${pageContext.request.contextPath}/product/export.do" class="btn btn-outline-success btn-sm"><i
                    class="fa fa-file-excel-o"></i> 导出</a>--%>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <table class="table table-sm table-bordered table-hover">
                <thead>
                <tr class="bg-light text-center">
                    <th><input type="checkbox" name="id" id="id"></th>
                    <th><span class="align-self-md-auto">用户名</span></th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>数量</th>
                    <%--<th>操作</th>--%>
                </tr>

                </thead>
                <tbody>
                <c:forEach var="p" items="${requestScope.page.list}">

                    <tr>
                        <td class="text-center">
                            <input type="checkbox" name="id">
                        </td>
                        <td>${p.userName}</td>
                        <td>${p.productName}</td>
                        <td>${p.price}</td>
                        <td>${p.num}</td>
                            <%--<td>
                                <c:choose>
                                    <c:when test="${p.status == 0}">
                                        <span class="badge badge-warning ">下架</span>
                                    </c:when>
                                    <c:otherwise>
                                        <span class="badge badge-success">上架</span>
                                    </c:otherwise>
                                </c:choose>
                            </td>
                            <td>
                                <fmt:formatDate value="${p.addDate}" pattern="yyyy-MM-dd"/>
                            </td>--%>
                        <%--<td>

                                &lt;%&ndash;<c:choose>
                                    <c:when test="${p.status == 0}">
                                        <a class="btn btn-sm btn-outline-success" href="${pageContext.request.contextPath}/product/changeStatus.do?id=${p.id}"><i class="fa fa-arrow-up"></i>上架</a>
                                    </c:when>
                                    <c:otherwise>
                                        <a class="btn btn-sm btn-outline-warning" href="${pageContext.request.contextPath}/product/changeStatus.do?id=${p.id}"><i class="fa fa-arrow-down"></i>下架</a>
                                    </c:otherwise>
                                </c:choose>&ndash;%&gt;
                                &lt;%&ndash;<a class="btn btn-sm btn-outline-danger" href="/Mall/cart/delete?id=${p.id}"><i class="fa fa-trash-o"></i>删除</a>
                                <a class="btn btn-sm btn-outline-info" href="/Mall/product/getId?id=${p.id}"><i class="fa fa-edit"></i>编辑</a>&ndash;%&gt;
                           &lt;%&ndash; <a class="btn btn-sm btn-outline-info"
                               href="${pageContext.request.contextPath}/product/info.do?id=${p.id}"><i
                                    class="fa fa-info"></i>查看</a>&ndash;%&gt;
                        </td>--%>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6" style="text-align: center">
            <c:if test="${requestScope.page.pageNum <=1}">
                <a href="#">上一页</a>
            </c:if>
            <c:if test="${requestScope.page.pageNum > 1}">
                <a href="/Mall/cart/page?pageNum=${requestScope.page.pageNum-1}&pageSize=${requestScope.page.pageSize}">上一页</a>
            </c:if>
            <c:choose>
                <c:when test="${requestScope.page.pageTotal<=5}">
                    <%--循环输出这些页码--%>
                    <c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
                        <%--如果是当前页面，则显示【当前页码】--%>
                        <c:if test="${i == requestScope.page.pageNum}">
                            【${i}】
                        </c:if>
                        <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                        <c:if test="${i != requestScope.page.pageNum}">
                            <a href="/Mall/cart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                        </c:if>
                    </c:forEach>

                </c:when>
                <c:when test="${requestScope.page.pageTotal>5}">
                    <c:choose>
                        <%--页码在前三，显示1-5--%>
                        <c:when test="${requestScope.page.pageNum<=3}">
                            <c:forEach begin="1" end="5" var="i">
                                <%--如果是当前页面，则显示【当前页码】--%>
                                <c:if test="${i == requestScope.page.pageNum}">
                                    【${i}】
                                </c:if>
                                <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                                <c:if test="${i != requestScope.page.pageNum}">
                                    <a href="/Mall/cart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                                </c:if>
                            </c:forEach>
                        </c:when>

                        <%--页码在后三，显示(Total-4)-Total--%>
                        <c:when test="${requestScope.page.pageNum > requestScope.page.pageTotal-3}">
                            <c:forEach begin="${requestScope.page.pageTotal-4}" end="${requestScope.page.pageTotal}"
                                       var="i">
                                <%--如果是当前页面，则显示【当前页码】--%>
                                <c:if test="${i == requestScope.page.pageNum}">
                                    【${i}】
                                </c:if>
                                <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                                <c:if test="${i != requestScope.page.pageNum}">
                                    <a href="/Mall/cart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                                </c:if>
                            </c:forEach>

                        </c:when>

                        <%--其余其他情况，显示（当前页码-2）-（当前页码+2）--%>
                        <c:otherwise>
                            <c:forEach begin="${requestScope.page.pageNum-2}" end="${requestScope.page.pageNum+2}"
                                       var="i">
                                <%--如果是当前页面，则显示【当前页码】--%>
                                <c:if test="${i == requestScope.page.pageNum}">
                                    【${i}】
                                </c:if>
                                <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                                <c:if test="${i != requestScope.page.pageNum}">
                                    <a href="/Mall/cart/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                                </c:if>
                            </c:forEach>
                        </c:otherwise>
                    </c:choose>

                </c:when>
            </c:choose>
            <c:if test="${requestScope.page.isLastPage}">
                <a href="#">下一页</a>
            </c:if>
            <c:if test="${!requestScope.page.isLastPage}">
                <a href="/Mall/cart/page?pageNum=${requestScope.page.pageNum+1}&pageSize=${requestScope.page.pageSize}">下一页</a>
            </c:if>

        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<!-- 引入百度Echarts -->
<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    /* 折线图 */
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('lineChart'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['销售量', '访问量']
        },
        toolbox: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
                formatter: '{value} 次'
            }
        }],
        series: [

            {
                name: '销售量',
                type: 'line',
                stack: '总量',
                areaStyle: {
                    normal: {}
                },
                data: [320, 332, 301, 334, 390, 330]
            },
            {
                name: '访问量',
                type: 'line',

                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {
                    normal: {}
                },
                data: [820, 932, 901, 934, 1290, 1330]
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
